<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>孟孟哒个人博客 — 专治各种不服BUG</title>
    <meta charset="UTF-8">
</head>
<body>
<jsp:include page="common/header.jsp"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/media/css/timeline.css"/>
<!--导航条-->
<nav class="breadcrumb">
    <div class="container"><i class="Hui-iconfont">&#xe67f;</i> <a href="<%=request.getContextPath()%>/blog/list.html"
                                                                   class="c-primary">首页</a> <span
            class="c-gray en">&gt;</span> <span class="c-gray">闲言碎语</span></div>
</nav>
<section class="container mt-20">
    <div class="container-fluid">
        <div class="timeline" id="timeline">

        </div>

    </div>
    <div id="page"></div>
</section>
<jsp:include page="common/footer.jsp"/>

<script>
    $(function () {
        diaryList();//先加载第一页
        //on scolling, show/animate timeline blocks when enter the viewport
        $(window).on('scroll', function () {
            $('.cd-timeline-block').each(function () {
                if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden')) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
                }
                if ($(window).scrollTop() - $(this).offset().top > 0) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden').removeClass('bounce-in');
                }

            });
            $('.cd-timeline-block').each(function () {
                if ($(this).offset().top < $(window).scrollTop() + $(window).height() * 0.75) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden');
                }
            });
            //$(document).height()获取当前文档的高度
            //document.body.clientHeight是浏览器可视范围高度
            //元素距离文档顶端的高度-滚动条高度-提前量<浏览器可视范围高度
            if($("#page").offset().top-$(window).scrollTop()-20<$(window).height()){
                diaryList();
            }

        });

    });
    var page=1;
    var isLastPage=false;
    var lastPage=0;
   function diaryList(){
       if(isLastPage){
           //$("#page").html("没有更多了")
           return;
       }
       if(lastPage==page){
           return;
       }
       lastPage=page;
       $.ajax({
           url:"/diary/list.html",
           data:"pageNum="+page,
           method:"post",
           success:function(data){
               $.each(data.list,function(index,obj){
                   var str="<div class=\"cd-timeline-block\">\n" +
                       "        <div class=\"cd-timeline-img cd-picture\">\n" +
                       "        <img src=\"<%=request.getContextPath()%>/media/css/timeline/cd-icon-location.svg\" alt=\"position\">\n" +
                       "        </div>\n" +
                       "        <div class=\"cd-timeline-content\">\n" +
                       "        <h4>"+obj.title+"</h4>\n" +
                       "        <p>"+obj.content+"</p>\n" +
                       "        <a href=\"http://www.wfyvv.com\" class=\"f-r\"><input class=\"btn btn-success size-S\" type=\"button\" value=\"更多\"></a>\n" +
                       "        <span class=\"cd-date\">"+obj.createdDate+"</span>\n" +
                       "        </div>\n" +
                       "        </div>";
                       $("#timeline").append(str);
               });
               isLastPage=data.isLastPage;
               page++;

           }
       })
   }


</script>
</body>
</html>
